<template>
	<view>
		<radio-group @change="setDefaultAddress" v-if="addressList.length>0">
			<view class="cu-list menu-avatar">
				<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in addressList" :key="index"
				 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
					<view class="cu-avatar lg cuIcon-locationfill main-color"></view>
					<view class="content">
						<view>{{item.consignee}} {{item.phone}}</view>
						<view class="text-gray">{{item.province}} {{item.city}} {{item.district}} {{item.address}}</view>
					</view>
					<view class="action text-gray text-sm">
						<label>
							<radio class='red' :checked="item.defaultAddress" :value="item.id"></radio><br>设为默认
						</label>
					</view>
					<view class="move">
						<view class="bg-grey" @click="toEdit(item)">编辑</view>
						<view class="main-bg-color" @click="delAddress" :data-value="item.id">删除</view>
					</view>
				</view>
			</view>
		</radio-group>
		<view v-else class="text-center text-gray margin-top-100">收货地址为空哦!</view>
		<view class="add-section">
			<button class="btn round main-bg-color" @click="toAdd">新增收货地址</button>
		</view>
	</view>
</template>

<script>
	import {UserService} from "@/api/UserService.js"
	export default {
		data() {
			return {
				modalName: null,listTouchStart: 0,listTouchDirection: null,addressList:[]
			}
		},
		onPullDownRefresh() {
			this.loadAddress();
			uni.stopPullDownRefresh();
		},
		onShow() {
			this.loadAddress();
		},
		methods: {
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			toAdd(){
				uni.navigateTo({
					url:"/pages/home/address/add"
				});
			},
			loadAddress(){
				UserService.getAddress().then(res=>{
					this.addressList=res;
				});
			},
			setDefaultAddress(e){
				const productId=e.detail.value;
				UserService.settingDefault(productId).then(()=>{
					this.loadAddress();
				});
			},
			toEdit(item){
				uni.navigateTo({
					url:"/pages/home/address/add",
					success:function(res){
						res.eventChannel.emit('sendEditAddressData', item);
					}
				});
			},
			delAddress(e){
				const that=this;
				uni.showModal({
					title:"提示",
					content:"您确认要删除该条数据吗?",
					success:function(res){
						if (res.confirm) {
							const productId=e.currentTarget.dataset.value;
							UserService.removeAddress(productId).then(()=>{
								that.loadAddress();
							});			
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	radio-group{width: 100%;}
.cu-list {
	.cu-item {
		height: 180rpx !important;
		.cu-avatar{
			background: none !important;
		}
	}
}
.add-section{
	width:100%;
	text-align:center;
	position: fixed;
	bottom: 100rpx;
	button{
		width:80%;
	}
}
</style>
